/*******************
结果确认
* */
<template>
  <basic-container>
    <el-row>
      <targetExaminHead
        :sign="{i:true}"
      />
    </el-row>
    <el-row v-if="!isFillIn">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="考核名称">
                <el-input v-model="searchForm.name" placeholder="考核名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <selectSearch @getDataByPerid="getDataByPerid"></selectSearch>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row  style=" border-bottom: 1px solid #b0bde2">
      </el-row>
      <div style="margin:20px 0 0 0 ">
        <span>指标考核&nbsp;&nbsp;</span>
        <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
          <el-radio :label="0">人员</el-radio>
          <el-radio :label="1">机构</el-radio>
        </el-radio-group>
      </div>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index"  :index="indexMethod"  label="序号" align="center" width="55"></el-table-column>
          <el-table-column prop="assessUserName" align="center" label="员工编号" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessRealName" align="center" label="姓名" show-overflow-tooltip  v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip  v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip  v-else></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="period" align="center" label="考核周期" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sumScore" align="center" label="总得分" show-overflow-tooltip></el-table-column>

          <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.appealState | transState}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" fixed="right" width="210" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="small"
                @click="confirmIndex(scope.row)"
              >确 认</el-button>
              <el-button
                type="primary"
                plain
                size="small"
                v-if="scope.row.appealState!=0?false:true"
                @click="dataView(scope.row,'ss')"
              >申诉</el-button><!--(scope.row.appealState!=0 || scope.row.ssFlag==0)?false:true-->
              <el-button
                type="primary"
                plain
                size="small"
                @click="dataView(scope.row,'ck')"
              >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            :total="pageData.totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </el-row>

    <!--申诉、查看界面-->
    <el-row v-if="isFillIn" style="padding: 0 20px; background: #FBFBFD;">
      <el-row style="border-bottom: 1px solid rgb(176, 189, 226);" >
        <el-form ref="form" :model="formData"  :inline="true" label-width="100px" >
           <el-form-item  style="display: flex;justify-content: center">
             <span  v-if="!choosePerOrDept"   style="font-weight: bold;font-size: 20px">{{formData.assessRealName}}</span>
             <span  v-else  style="font-weight: bold;font-size: 20px">{{formData.assessDeptName}}</span>
           </el-form-item>
            <el-row style="display: flex;align-items: center;justify-content: center;margin-top: 10px" class="detailinfo">
              <el-form-item label="员工编号："  v-if="!choosePerOrDept">
                <span>{{formData.assessUserName}}</span>
              </el-form-item>
              <el-form-item label="部门："  v-if="!choosePerOrDept">
                <span>{{formData.assessDeptName}}</span>
              </el-form-item>
              <el-form-item label="周期：">
                <span>{{formData.period}}</span>
              </el-form-item>
            </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="detailDataList"
          border
          show-summary
          :summary-method="getSummaries"
          stripe
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
          <el-table-column prop="normType" align="center" label="指标分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normName" align="center" label="指标名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normRule" align="center" label="指标规则" show-overflow-tooltip></el-table-column>
          <el-table-column prop="weight" align="center" label="权重" show-overflow-tooltip></el-table-column>
          <el-table-column prop="formula" align="center" label="计算公式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="targetValue" align="center" label="目标值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" align="center" label="单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finishValue" align="center" label="填报值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="score" align="center" label="得分" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finalScore" align="center" label="评审得分" show-overflow-tooltip></el-table-column>
          <el-table-column prop="provideRealName" align="center" label="数据提供部门/人" show-overflow-tooltip></el-table-column></el-table>

        <el-row  v-if="ssShow" >
            <el-form :model="appealForm" ref="appealFormNode"  :rules="rules" label-width="85px" class="ssly">
              <el-form-item prop="reason" label="申诉理由:">
                <el-input
                  style="width: 100%"
                  type="textarea"
                  :rows="4"
                  v-model="appealForm.reason"
                  clearable
                  placeholder="请填写申诉理由"
                ></el-input>
              </el-form-item>
            </el-form>
        </el-row>

        <el-row v-else >
          <el-form :model="formData"  ref="appealFormRef" label-width="90px" class="sslyandanswer">
            <el-form-item label="申诉理由:" v-if="formData.reason==null||formData.reason==''?false:true">
              <span>{{formData.reason?formData.reason:''}}</span>
            </el-form-item>
            <el-form-item label="申诉答复:" prop="answer"  v-if="formData.answer==null||formData.answer==''?false:true">
              <span>{{formData.answer?formData.answer:''}}</span>
            </el-form-item>
          </el-form>
        </el-row>

        <el-row style="margin:10px;text-align:right">
          <el-button type="primary" @click="submitAppeal" v-if="ssShow">提 交</el-button>
          <el-button type="primary" @click="isFillIn=false">返 回</el-button>
        </el-row>
      </el-row>
    </el-row>
  </basic-container>
</template>

<script>
    import targetExaminHead from "@/views/dailyExamine/components/targetExaminHead"; //状态头
    import {resultExaminList, resultExaminDetail, addAppeal,khdxConfirm} from "@/api/dailyExamine/targetExamine/InitiateFilling";
    import { examineList } from "@/api/dailyExamine/targetExamine/createAssessment"; //接口api
    import selectSearch from "@/views/dailyExamine/components/select-search.vue"; //流程组件

    export default {
        data() {
            var checkReason = (rule, value, callback) => {
                console.log(value)
                if (value) {
                    if (value.length>250) {
                        callback(new Error("最多可输入250个字符!"));
                    } else {
                        callback();
                    }
                } else {
                    callback(new Error("请输入申诉理由"));
                }
            };
            return {
                choosePerOrDept: 0,
                detailDataList: [], //查看页面的数组
                appealForm: {}, //申诉表单对象
                appealVis: false, //申诉弹窗
                isFillIn: false, //是否查看
                searchheight: "0", //搜索组件的高度
                searchadvanced: true, //搜索的显隐
                searchForm: {}, //搜索对象
                dataListLoading: false, //表格是否加载
                formData:{},
                dataList: [], //表格数组
                multipleSelection: [], //勾选数据
                pageData: {
                    //分页对象
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                },
                assessParticipantId: null ,//后台需要的考核id
                rules:{
                    reason: [{ validator:checkReason,trigger: "blur"}]
                },
                ssShow:true
            };
        },
        filters: {
            transState(val) {
                switch (val) {
                    case 0:
                        return "待确认";
                        break;
                    case 1:
                        return "申诉中";
                        break;
                    case 2:
                        return "申诉通过";
                        break;
                    case 3:
                        return "申诉被驳回";
                        break;
                    case 4:
                        return "已作废";
                        break;
                    case 5:
                        return "已确认";
                        break;
                    case 25:
                        return "已确认";
                        break;
                    case 35:
                        return "已确认";
                        break;
                    case 45:
                        return "已确认";
                        break;
                    default:
                        break;
                }
                // 0待确认
                // 1申诉中
                // 2申诉通过
                // 3申诉被驳回
                // 4已作废
                // 5已确认
                // 25 申诉通过,已确认
                // 35 申诉被驳回,已确认
                // 45 作废,已确认
                //
                // 0 显示 确认
                // 1 隐藏 确认
                // 2 显示 确认
                // 3 显示 确认
                // 4 显示 确认
                // 5 隐藏 确认
                //
                // ssFlag   0 隐藏申诉   1显示申诉
            }
        },
        components: {
            targetExaminHead ,//状态头
            selectSearch
        },
        created() {
            this.getDataList();
        },
        methods: {
            choosePerOrDeptChange() {
                this.pageData.pageIndex = 1 ;
                this.getDataList();
            },
            // 确认
            confirmIndex(row) {
                // 确定 同意
                    const h = this.$createElement;
                    this.$msgbox({
                        title: '提示',
                        message: h('p', { style:" font-size:16px" }, [
                            h('span', null, '对此单进行确认'),
                        ]),
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                                khdxConfirm(row.id).then(r => {
                                    if (r.data.code == 0) {
                                        this.$message.success("操作成功");
                                        this.getDataList();
                                    } else {
                                        this.$message.error(r.data.msg);
                                    }

                                });
                                done();
                            } else {
                                done();
                            }
                        }
                    }).then(action => {
                    });
            },
            // 提交申诉
            submitAppeal() {
                this.$refs["appealFormNode"].validate(valid => {
                    if(valid){
                        addAppeal(this.assessParticipantId, this.appealForm.reason)
                            .then(r => {
                                if (r.data.code == 0) {
                                    this.$message.success("申述成功,等待处理");
                                    //this.appealVis = false;
                                    this.isFillIn = false;
                                    this.getDataList() ;
                                } else {
                                    this.$message.error(r.data.msg);
                                    //this.appealVis = false;
                                    this.isFillIn = false;
                                }
                            })
                            .catch(err => {
                            });
                    }else{
                        return ;
                    }

                })
            },
            // 点击申诉出弹窗
            handleAppeal() {
                this.appealVis = true;
                this.appealForm.user = null;
            },
            // 返回
            goBack() {
                this.isFillIn = false;
            },
            //   查看
            dataView(data,type) {

                if(type == 'ck'){ //如果是查看，隐藏申诉form以及提交按钮
                    this.ssShow = false ;
                }else{
                    this.ssShow = true ;
                }

                this.isFillIn = true;
                this.assessParticipantId = data.id;
                resultExaminDetail(data.id)
                    .then(r => {
                        if (r.data.code == 0) {
                            this.detailDataList = r.data.data;
                            this.formData = r.data.data[0] ;
                        }
                    })
                    .catch(err => {});
            },
            // 查询条件的展开关闭
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if (this.searchadvanced) {
                    this.searchheight = "auto";
                }
            },
            // 查询列表
            getDataList() {
                this.dataListLoading = true ;
                examineList(
                    Object.assign(
                        {
                            current: this.pageData.pageIndex,
                            size: this.pageData.pageSize,
                            type: this.choosePerOrDept
                        },
                        this.searchForm
                    ),
                    12
                )
                    .then(r => {
                        if (r.data.code == 0) {
                            this.dataList = r.data.data.records;
                            this.pageData.totalPage = r.data.data.total;
                            this.dataListLoading = false ;
                        }
                    })
                    .catch(err => {});
            },
            // 勾选数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 条数变化
            sizeChangeHandle(val) {
                this.pageData.pageSize = val;
                this.pageData.pageIndex = 1;
                this.getDataList();
            },
            // 页码分页变化
            currentChangeHandle(val) {
                this.pageData.pageIndex = val;
                this.getDataList();
            },
            //table表索引
            indexMethod(index) {
               return (this.pageData.pageIndex-1)*this.pageData.pageSize+index+1;
            },
            getSummaries(param) {
              //此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
                console.log(param)
                const { columns, data } = param
                const len = columns.length
                const sums = []
                columns.forEach((column, index) => {
                    //如果是第一列，则最后一行展示为“总计”两个字
                    if (index === 0) {
                        sums[index] = '总计'
                        //如果是最后一列，索引为列数-1，则显示计算总和
                    } else if (index === len -2) {
                        /*const values = data.map(item => Number(item[column.property]))
                          if (!values.every(value => isNaN(value))) {
                               sums[index] = values.reduce((prev, curr) => {
                                 const value = Number(curr)
                                 if (!isNaN(value)) {
                                     return prev + curr
                                 } else {
                                     return prev
                                 }
                             }, 0)
                        } else {
                            sums[index] = 'N/A'
                        }*/
                        sums[index] =  this.formData.sumScore ;
                        //如果是除了第一列和最后一列的其他列，则显示为空
                    } else {
                        sums[index] = ''
                    }
                })
                return sums
            },
            //选择周期执行搜索功能
            getDataByPerid(period){
                this.searchForm.period = period ;
                this.getDataList() ;
            }
        }
    };
</script>

<style lang="scss" scoped>
  /deep/.el-table .cell{padding-left: 5px!important;padding-right: 5px!important;}
  /deep/.el-button+.el-button{margin-left:5px!important;}
  /deep/.el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right{border: none!important;}
  ::v-deep .el-select .el-select__tags {
    overflow: auto !important;
  //   min-height: 200px !important;
  }
  ::v-deep.el-tag.el-tag--info {
    margin: 5px;
    border: 1px solid green;
  }

  /deep/.el-form-item--small.el-form-item{margin-bottom: 0!important; margin-top: 20px;}
  .detailinfo .el-form-item--small.el-form-item{margin-top: 0px!important;}
  /deep/.sslyandanswer .el-form-item__content{  margin-left: 90px!important;padding: 0 15px!important;min-height: 80px!important;border: 1px solid #ccccda!important;border-radius: 5px!important;}
  /deep/.sslyandanswer .el-form-item__label,/deep/.ssly .el-form-item__label {font-weight: bold!important;}
  /deep/.el-textarea__inner{background: #fff!important;}
</style>
